<!-- 分类 -->
<template>
	<view>
		<!-- 导航栏(全部使用自定义导航栏)，因为内置导航栏在ios端有bug -->
		<!-- 自定义组件：系统状态栏和导航栏 -->
		<statusBar :sousuo="true" :button="false"></statusBar>
		
		<card :title="'热门分类'" :showRefresh="false">
			<scroll-view scroll-x="true" class="scroll-row">
				<view
				v-for="(item,index) in remen" :key="index"
				class="scroll-row-item"
				style="width: 187.5rpx;height: 151rpx;">
					<!-- 调用分类图标组件 -->
					<cateIcon :item="item"></cateIcon>
				</view>
				
			</scroll-view>
		</card>
		
		<!-- 分割线 -->
		<view class="divid-line-20"></view>
		
		<card :title="'全部分类'" :showRefresh="false">
			<!-- position-absolute left-0 可以让元素突破父级元素的内padding限制 -->
			<view class="position-absolute left-0 flex flex-wrap">
				<view
				v-for="(item,index) in quanbu" :key="index"
				style="width: 187.5rpx;height: 151rpx;">
					<cateIcon :item="item"></cateIcon>
				</view>
			</view>
		</card>
		
		<u-tabbar v-model="current" :list="tabbarList" :inactive-color="'#333C4E'" :active-color="'#f9749a'"></u-tabbar>
	</view>
</template>

<script>
	import card from '@/components/common/card.vue'
	import cateIcon from '@/components/common/cate-icon.vue'
	import statusBar from '@/components/common/statusBar.vue'
	export default {
		// 注册自定义组件
		components:{
			card,
			cateIcon,
			statusBar
		},
		data() {
			return {
				remen:[
					{
						src: '/static/demo/cate/1.png',
						name: '番剧'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '国创'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '放映厅'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '纪录片'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '漫画'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '专栏'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '直播'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '课堂'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '动画'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '音乐'
					}
				],
				quanbu:[
					{
						src: '/static/demo/cate/1.png',
						name: '番剧'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '国创'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '放映厅'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '纪录片'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '漫画'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '专栏'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '直播'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '课堂'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '动画'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '音乐'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '舞蹈'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '游戏'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '数码'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '生活'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '鬼畜'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '时尚'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '娱乐'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '影视'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '电影'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '电视剧'
					}
				],
				// 当前滑块的索引
				cur: 0,
				current:0,
				tabbarList: [{
					// 非凸起按钮未激活的图标，可以是uView内置图标名或自定义扩展图标库的图标
					// 或者png图标的【绝对路径】，建议尺寸为80px * 80px
					// 如果是中间凸起的按钮，只能使用图片，且建议为120px * 120px的png图片
					iconPath: "/static/tabbar/find.png",
					// 激活(选中)的图标，同上
					selectedIconPath: "/static/tabbar/findSelected.png",
					// 显示的提示文字
					text: '首页',
					// 红色角标显示的数字，如果需要移除角标，配置此参数为0即可
					count: 0,
					// 如果配置此值为true，那么角标将会以红点的形式显示
					isDot: false,
					// 如果使用自定义扩展的图标库字体，需配置此值为true
					// 自定义字体图标库教程：https://www.uviewui.com/guide/customIcon.html
					customIcon: false,
					// 如果是凸起按钮项，需配置此值为true
					midButton: false,
					// 点击某一个item时，跳转的路径，此路径必须是pagees.json中tabBar字段中定义的路径
					pagePath: '/pages/index/index', // 1.5.6新增，路径需要以"/"开头
				},
				{
					iconPath: "/static/tabbar/class.png",
					selectedIconPath: "/static/tabbar/classSelected.png",
					text: '分类',
					count: 0,
					isDot: false,
					customIcon: false,
					midButton: false,
					pagePath: '/pages/class/class',
				},
				{
					iconPath: "/static/tabbar/my.png",
					selectedIconPath: "/static/tabbar/mySelected.png",
					text: '我的',
					count: 0,
					isDot: false,
					customIcon: false,
					midButton: false,
					pagePath: '/pages/my/my',
				}]
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
